<template>
    <div style="display: flex; justify-content: center; background-color: #fff;">
        <div style="width: 755px">
            <span>订单中心</span>
            <div style="display: flex; justify-content: center; margin-top: 20px;">
                <el-table :data="orderInfo" stripe style="width: 100%">
                    <el-table-column type="selection" width="55"/>
                    <el-table-column prop="order_number" label="编号" width="200" />
                    <el-table-column prop="express" label="快递单号" width="180" />
                    <el-table-column prop="addtime" label="下单日期" />
                    <el-table-column label="查看订单详情">
                        <template v-slot:default="scope">
                            <el-button type="primary" round @click="getOrderDetail(scope.row.id)">查看订单</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        <!-- 查看订单 -->
        <el-dialog v-model="dialogVisibleCheckOrder" title="订单详情" width="450" :before-close="handleCloseDetail">
            <el-table :data="orderDetailData" style="width: 100%">
                <el-table-column type="index" width="20" />
                <el-table-column prop="product_info.title" label="产品名称" width="240" />
                <el-table-column prop="product_info.price" label="单价" width="50" />
                <el-table-column prop="count" label="购买数量" />
            </el-table>
        </el-dialog>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { orderList, orderDetail } from '../requests/index';
import { ElMessage } from 'element-plus';
const dialogVisibleCheckOrder = ref(false);
const orderDetailData = ref();
const orderInfo = ref();

const getOrderList = async () =>{
    const res = await orderList();
    if (res.status === 2000){
        orderInfo.value = res.data;
    }else{
        ElMessage.error("获取订单列表失败")
    }
};

getOrderList();


// 查看订单详情
const getOrderDetail = async (id) => {
    dialogVisibleCheckOrder.value = true;
    const res = await orderDetail({ "id": id })
    if (res.status === 2000) {
        orderDetailData.value = res.data;
    } else {
        ElMessage.error(res.msg);
    };
};
const handleCloseDetail = () =>{
    dialogVisibleCheckOrder.value = false;
}
</script>

<style scoped>
:deep(.el-input__inner) {
    border: 1px solid #e9eef3;
}

.bty-login-content {
    margin-top: 20px;
}

.bty-login-content>span,
input {
    float: right;
}

.bty-login-note {
    text-align: center;
    color: rgb(238, 87, 87);
    margin-bottom: 50px;
}
</style>